<template>
	<div class="document_item">
		<div class="doc_img hidden-xs-only cursor_class" v-if="needCoverPicture">
			<img :src="proxy.$baseImgUrl + coverPicture" alt="" @error="imgError($event)"
				@click="handleClickToArticleDetail(id)" />
		</div>
		<div class="doc_info">
			<div class="document_title text_ellipsis cursor_class text_decoration" @click="handleClickToArticleDetail(id)">
				{{ title }}
			</div>
			<div class="document_desc text_ellipsis text_muted hidden-xs-only">
				{{ description }}
			</div>
			<div class="doucment_tag  hidden-xs-only">
				<template v-if="groups">
					<el-tag class="tag_item cursor_class" type="info" v-for="items in groups.split(',')" :key="items"
						@click="hanleClickTag(items, directionId)">
						{{ items }}
					</el-tag>
				</template>
			</div>
			<div class="docment_esb">
				<div class="thumb_wrap hidden-xs-only" v-if="isLikeBtn">
					<el-button type="primary" link @click="handleClickThumb(id, isLike)"
						:loading="thumbBtnLoading && id === clickId">
						👍赞 {{ likeNum }}
					</el-button>
				</div>
				<div class="esb_wrap" :style="{ 'padding': isLikeBtn ? '0 20px' : '0' }">
					<div class="esb_item">
						<el-icon>
							<User />
						</el-icon>
						<span>{{ nickName }}</span>
					</div>
					<div class="esb_item">
						<el-icon>
							<ChatDotSquare />
						</el-icon>
						<span>{{ commentCount }}</span>
					</div>
					<div class="esb_item">
						<el-icon>
							<View />
						</el-icon>
						<span>{{ pageViewNum }}</span>
					</div>
					<div class="esb_item hidden-xs-only" v-if="needCreateTime">
						<el-icon>
							<Timer />
						</el-icon>
						<span>{{ createTime }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, toRefs, defineProps, PropType, getCurrentInstance, defineEmits } from 'vue'
import { blogLike } from '@/api/article'
import { ElMessage } from 'element-plus'
import { imgError } from '@/utils/imgError'
import {
	Tickets,
	UserFilled,
	RefreshLeft,
	Plus,
	Document,
	User,
	ChatDotSquare,
	View,
	Timer,
	Pointer,
	More,
	Location,
	Link
} from '@element-plus/icons-vue'
import router from '@/router'
const { proxy } = getCurrentInstance()
const emits = defineEmits(['liked']);
// interface DataList {
// 	authorId: string,
// 	belittle: string,
// 	belittleNum: number,
// 	collectNum: number,
// 	content: string,
// 	coverPicture: string,
// 	createBy: string,
// 	createTime: string,
// 	description: string,
// 	groupId: number,
// 	id: string
// 	isHot: string,
// 	isOfficialRecommend: boolean
// 	like: boolean,
// 	likeNum: number,
// 	pageViewNum: number,
// 	params: any
// 	remark: string,
// 	searchValue: string,
// 	title: string,
// 	type: string,
// 	updateBy: string,
// 	updateTime: string
// 	userName: string
// 	visible: boolean,
// 	commentCount: number,
// 	groups: string,
// 	isLike: number
// }
defineProps({
	// 是否需要点赞按钮
	isLikeBtn: {
		type: Boolean,
		default: true,
	},
	// 是否需要图片
	needCoverPicture: {
		type: Boolean,
		default: true,
	},
	needCreateTime: {
		type: Boolean,
		default: true,
	},
	id: {
		type: String || Number,
		default: '',
	},
	coverPicture: {
		type: String,
		default: '',
	},
	title: {
		type: String,
		default: '',
	},
	description: {
		type: String,
		default: '',
	},
	groups: {
		type: String,
		default: '',
	},
	likeNum: {
		type: Number,
		default: 0,
	},
	nickName: {
		type: String,
		default: '',
	},
	commentCount: {
		type: Number,
		default: 0,
	},
	pageViewNum: {
		type: Number,
		default: 0,
	},
	createTime: {
		type: String,
		default: '',
	},
	isLike: {
		type: Number,
		default: 0,
	},
	directionId: {
		type: Number || String,
		default: '',
	}
	// 列表数组
	// dataList: {
	// 	type: Array as unknown as PropType<DataList[]>,
	// 	default: () => [],
	// 	require: true
	// }
})
const thumbBtnLoading = ref<boolean>(false)
const clickId = ref<string | null>(null)
const handleClickToArticleDetail = (id: string) => {
	router.push({
		name: 'article-detail',
		params: {
			id
		}
	})
}
const hanleClickTag = (tagname: string, directionId: string | number) => {
	const url = router.resolve({
		path: '/blog',
		query: {
			tagname: encodeURIComponent(tagname),
			dirId: directionId
		}
	})
	window.open(url.href, '_blank')
}
/**
 * 点赞
 */
const handleClickThumb = async (id: string, isLike: number) => {
	clickId.value = id
	let value = null
	if (isLike === 0) {
		value = 1
	} else {
		value = 0
	}
	try {
		thumbBtnLoading.value = true
		const res: any = await blogLike({
			id,
			value
		})
		if (res) {
			if (value === 1) {
				ElMessage({
					message: '点赞成功',
					type: 'success',
					duration: 5 * 1000
				})
			} else {
				ElMessage({
					message: '取消点赞成功',
					type: 'success',
					duration: 5 * 1000
				})
			}
			// 通知父组件重新请求
			emits('liked')
		}
	} finally {
		thumbBtnLoading.value = false
	}
}
</script>

<style lang="scss" scoped>
.document_item {
	display: flex;
	padding: 20px 0;
	border-bottom: 1px solid #eee;

	&:last-child {
		border-bottom: 0;
	}

	.doc_img {
		width: 200px;
		height: 120px;
		border-radius: 4px;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.doc_info {
		flex: 1;
		margin-left: 20px;
		overflow: hidden;

		.document_title {
			font-weight: 700;
			font-size: 18px;
			margin-bottom: 10px;
		}

		.document_desc {
			font-size: 15px;
			line-height: 1.5;
			margin-bottom: 10px;
			// min-height: 38px;
			overflow: hidden;
		}

		.doucment_tag {
			margin-bottom: 10px;

			.tag_item {
				margin-right: 12px;
				margin-bottom: 10px;
			}
		}

		.docment_esb {
			display: flex;
			justify-content: space-between;

			.thumb_wrap {
				button {
					color: rgba(0, 0, 0, 0.45098039215686275);

					&:hover {
						color: #409eff;
					}
				}
			}

			.esb_wrap {
				display: flex;
				flex-wrap: wrap;
				padding: 0 20px;

				.esb_item {
					margin-right: 20px;
					display: flex;
					align-items: center;
					color: rgba(0, 0, 0, 0.45098039215686275);
					font-size: 14px;
					margin-bottom: 10px;

					&:first-child {
						// margin-left: 0;
					}

					span {
						margin-left: 4px;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.esb_wrap {
		padding: 0 !important;
		margin-top: 10px;
	}
}
</style>
